<!--  -->
<template>
  <div class="container">
    <div class="title">
      <span>全局透明度设置</span>
    </div>
    <div class="slider">
      <b-progress
        @dragging="dragging"
        :percent.sync="percent"
        :stroke-width="2"
        :track-color="['#00000055', 'var(--joker)']"
        show-thumb
        allow-click
        allow-drag
        is-active
      />
    </div>
    <div class="title">
      <span>清除入场信息 </span>
      <el-tooltip
        effect="dark"
        content="清除直播入场信息"
        placement="right-start"
      >
        <i class="iconfont icon-tishifill"></i>
      </el-tooltip>
    </div>
    <div class="control">
      <b-switch
        class="item"
        v-model="controlValue"
        size="small"
        :width="46"
        true-color="var(--success)"
        false-color="tomato"
      >
        <span slot="open">开</span>
        <span slot="close">关</span>
      </b-switch>
    </div>
  </div>
</template>

<script>
import store from "../../../store/index";
export default {
  components: {},
  data() {
    return {
      percent: Math.floor(store.state.transparency),
      controlValue: store.state.interMessage,
    };
  },
  watch: {
    controlValue(n) {
      store.commit("changeinterMessage", n);
      window.localStorage.setItem("interMessage", n);
    },
  },
  methods: {
    dragging(e) {
      if (e === 100) {
        store.commit("changetransparency", 99);
        window.localStorage.setItem("transparency", 99);
      } else {
        store.commit("changetransparency", e);
        window.localStorage.setItem("transparency", e);
      }
    },
  },
};
</script>
<style scoped>
.container {
  padding-top: 5px;
  padding-left: 30px;
  text-align: left;
}
.title {
  margin: 20px 0 10px 0;
}
.title i {
  color: rgba(29, 141, 185, 0.993);
  font-size: 13px;
  cursor: pointer;
}
.slider {
  width: 180px;
}
</style>